<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="build/example.css">
    <link rel="stylesheet" href="build/jquery-weui.css">
    <link rel="stylesheet" href="build/weui.css">
    <script src="build/jquery-2.1.4.js"></script>
    <script src="build/jquery-weui.js"></script>

</head>
<body>
<!--头部标题-->
<div class="weui-tab">
    <div class="nav">
        <p class="nav-p">豆瓣</p>
    </div>
    <!--body-->
    <div class="weui-msg">
        <div class="weui-msg__icon-area">
            <i class="weui-icon-warn weui-icon_msg"></i>
        </div>
        <div class="weui-msg__text-area">
            <div class="weui-msg__title">您还没有登陆哦</div>
            <div class="weui-msg__desc">未登录时无法查看的哦，已有账号赶快去登陆，没有账号请先注册再登录哦</div>
        </div>
        <div class="weui-btn-area" style="text-align: center">
            <button class="weui-btn weui-btn_primary">立即登录</button>
            <button class="weui-btn weui-btn_default">立即注册</button>
        </div>
    </div>
    <!--底部切换-->
    <div class="weui-tabbar">
        <div class="weui-tabbar__item weui-bar__item_on">
            <img class="weui-tabbar__icon" src="img/1.jpg" alt="">
            <p class="weui-tabbar__label">首页</p>
        </div>
        <div class="weui-tabbar__item">
            <img class="weui-tabbar__icon" src="img/2.jpg" alt="">
            <p class="weui-tabbar__label">阅读</p>
        </div>
        <div class="weui-tabbar__item">
            <img class="weui-tabbar__icon" src="img/3.jpg" alt="">
            <p class="weui-tabbar__label">电影</p>
        </div>
        <div class="weui-tabbar__item">
            <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
            <img class="weui-tabbar__icon" src="img/4.jpg" alt="">
            <p class="weui-tabbar__label">我的</p>
        </div>
    </div>
</div>
</body>
</html>